<!--
  - Copyright (c) 2021.  北京维数科技有限公司
  - Date :  2021/3/25
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.0.0
  -->

<template>
  <div>
    <div class="abstatic-height"></div>
    <div class="app-container calendar-list-container">
      <div class="record-top-wrap">
        <div class="record-items-left">
            <div class="record-item line-with-verticl">
              <div class="over-topline line-with-verticl"></div>
               <span class="li_box">
                <p><i><icon-svg icon-class="real" style="fill:rgba(80, 227, 194, 0.3)"/></i>真实火警</p>
                <h1 style="color: #DB361D;">{{countList.realFire}}</h1>
              </span>
            </div>
            <div class="record-item line-with-verticl">
              <div class="over-topline line-with-verticl"></div>
               <span class="li_box">
                <p><i><icon-svg icon-class="wubao" style="fill:rgba(80, 227, 194, 0.3)"/></i>误报火警</p>
                <h1 style="color: rgba(80, 227, 194, 1)">{{countList.falseFire}}</h1>
              </span>
            </div>
          <div class="record-item line-with-verticl">
            <div class="over-topline line-with-verticl"></div>
            <span class="li_box">
                <p><i><icon-svg icon-class="abnormal" style="fill:rgba(80, 227, 194, 0.3)"/></i>故障报警</p>
                <h1 style="color: #F5A623;">{{countList.faultAlarm}}</h1>
              </span>
          </div>
        </div>
        <div class="record-items-right">
            <p class="chart-title"><i class="el-icon-caret-right"></i>报警趋势</p>
            <div id="record_chart"></div>
        </div>
      </div>
      <el-row style="padding-top: 30px;">
        <el-radio-group v-model="radioType" @change="switchTable">
          <el-radio-button label="now">当前报警</el-radio-button>
          <el-radio-button label="Fire_alarm">火警处理记录</el-radio-button>
          <el-radio-button label="fault">故障处理记录</el-radio-button>
        </el-radio-group>
        <div class="search">
          <span>报警类型</span>
          <el-select v-model="listQuery.alrmType" filterable placeholder="请选择" @change="restpage" size="mini">
            <el-option label="全部" value=""></el-option>
            <el-option v-for="(item,index) in alrmTypeList" :key="index" :label="item" :value="item"></el-option>
          </el-select>
          <span style="margin-left: 20px;">报警时间</span>
          <el-date-picker v-model="listQuery.dateStrs" size="mini" value-format="yyyy-MM-dd" type="daterange" range-separator="—" start-placeholder="开始日期" end-placeholder="结束日期" style="width:240px;"></el-date-picker>
          <el-button class="filter-item" type="primary" :disabled="isadvance"  size="mini" @click="handleFilter">查询</el-button>
          <el-popover
            placement="bottom"
            width="400"
            v-model="isadvance"
            trigger="click">
            <el-button class="filter-item" type="text" size="mini" slot="reference" @click.stop="isadvance=true"><span style="color:#50E3C2">高级查询</span></el-button>
            <div class="advancequery">
              <el-form :model="formLabelAlign" ref="searchForm" :rules="advancerules" label-width="100px" label-position="top">
                <el-form-item label="建筑物" prop="bName">
                  <el-select v-model="formLabelAlign.bName" filterable placeholder="全部" style="width: 100%;">
                    <el-option v-for="(item,index) in buildList" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="系列" prop="equipmentType">
                  <el-select v-model="formLabelAlign.equipmentType" filterable placeholder="全部" style="width: 100%;">
                    <el-option v-for="(item,index) in series" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="设备编号" prop="sensorNo">
                  <el-input v-model.trim="formLabelAlign.sensorNo"></el-input>
                </el-form-item>
                <el-form-item label="楼层" prop="floor">
                  <el-input v-model.trim="formLabelAlign.floor"></el-input>
                </el-form-item>
                <el-form-item label="位置描述" prop="positionDescription">
                  <el-input v-model.trim="formLabelAlign.positionDescription"></el-input>
                </el-form-item>
                <el-form-item label="处理人" prop="handlePerson" v-if="radioType==='fault'||radioType==='Fire_alarm'">
                  <el-input v-model.trim="formLabelAlign.handlePerson"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="handleAdvaceSerach('searchForm')" size="mini">查询</el-button>
                  <el-button @click="resetForm('searchForm')" type="text">取消</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-popover>
        </div>
        <el-table :data="list" :key="tableKey"  v-loading.body="listLoading" style="width: 100%;">
          <el-table-column label="建筑名">
            <template slot-scope="scope">
              <span>{{scope.row.bName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="设备编号">
            <template slot-scope="scope">
              <span>{{scope.row.sensorNo}}</span>
            </template>
          </el-table-column>
          <el-table-column label="系列">
            <template slot-scope="scope">
              <span>{{scope.row.equipmentType}}</span>
            </template>
          </el-table-column>
          <el-table-column label="楼层">
            <template slot-scope="scope">
              <span>{{scope.row.floor}}</span>
            </template>
          </el-table-column>
          <el-table-column label="位置描述">
            <template slot-scope="scope">
              <span>{{scope.row.positionDescription}}</span>
            </template>
          </el-table-column>
          <el-table-column label="测点">
            <template slot-scope="scope">
              <span>{{scope.row.unit}}</span>
            </template>
          </el-table-column>
          <el-table-column label="报警类型">
            <template slot-scope="scope">
              <span :class="{ fire:scope.row.alrmCategory==1 ,break:scope.row.alrmCategory==0 }">{{scope.row.alrmType}}</span>
            </template>
          </el-table-column>
          <el-table-column label="报警时间">
            <template slot-scope="scope">
              <span>{{scope.row.alrmDate}}</span>
            </template>
          </el-table-column>
          <!-- row1 -->
          <el-table-column label="处理人" v-if="radioType==='Fire_alarm'">
            <template slot-scope="scope">
              <span>{{scope.row.confirPerson}}</span>
            </template>
          </el-table-column>
          <el-table-column label="处理人" v-if="radioType==='fault'">
            <template slot-scope="scope">
              <span>{{scope.row.handlePerson}}</span>
            </template>
          </el-table-column>
          <el-table-column label="处理时间" v-if="radioType==='Fire_alarm'">
            <template slot-scope="scope">
              <span>{{scope.row.confirDate}}</span>
            </template>
          </el-table-column>
          <el-table-column label="处理时间" v-if="radioType==='fault'">
            <template slot-scope="scope">
              <span>{{scope.row.handleDate}}</span>
            </template>
          </el-table-column>
          <el-table-column label="平面图" v-if="planSetup==1">
            <template slot-scope="scope">
              <span class="img" @click="viewimg(scope.row,scope.row.floor)">查看平面图</span>
            </template>
          </el-table-column>
          <!-- row1 -->
          <el-table-column label="处理结果" v-if="radioType==='Fire_alarm'">
            <template slot-scope="scope">
              <span v-if="scope.row.fireFlag">{{scope.row.fireFlag==1?'真实火警':(scope.row.fireFlag==2?"火警测试":"误报")}}</span>
              <span v-else></span>
            </template>
          </el-table-column>
          <el-table-column label="是否处理" fixed="right" v-if="radioType==='now'">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleAlarm(scope.row)">处理
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <div v-show="!listLoading" class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[15,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="listQuery.tag==0?total:(listQuery.tag==1?totalfire:totalbreak)"> </el-pagination>
      </div>

    </div>
    <planDialog :Show.sync="realtimePointShow" :buildId.sync="buildId" :channelId.sync="params.channelId" :newfloor.sync="newfloor"></planDialog>

    <el-dialog title="处理提示"
               :visible.sync="isdelalram"
               :show-close='false'
               :close-on-click-modal='false'
               :close-on-press-escape='false'
               custom-class="xf-jc-dialog" width="360px" height="160px">
      <div class="xf-jc-deletect">
        <el-radio-group v-model="switchalramtype" v-if="alarmtype==1">
          <el-radio label="1">真实火警</el-radio>
          <el-radio label="2">火警测试</el-radio>
          <el-radio label="0">误报</el-radio>
        </el-radio-group>
        <p v-else>当前故障确认已处理吗？</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" round size="medium" @click="handleSure">确定</el-button>
        <el-button round size="medium" @click="isdelalram=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import echarts from 'echarts';
  import clip from '@/utils/clipboard' // use clipboard directly

  import planDialog from '@/views/device/realtimeMonit/components/realtimePoints';
  import {
    selectCount,
    selectAlrmType,
    pageList,
    selectCountByBuild,
    selectCountChart,
    getSelected,
    changeRsolve,
    changeFireRsolve
  } from "@/api/device/exceptionRecord/index";

  export default {
    components: {planDialog},
    data() {
      return {
        tableKey:0,
        isdelalram:false,
        realtimePointShow:false,
        switchalramtype:'1',
        radioType: 'now',
        countList:'',
        alrmTypeList: [],
        series:[],
        buildList: '',
        isadvance:false,
        list: [],
        total: null,
        totalfire:null,
        totalbreak:null,
        listLoading: true,
        alarmtype:'',
        listQuery: {
          page: 1,
          limit: 15,
          tag:0,
          alrmType:"",
          dateStrs:null,
          bName: null, //建筑物
          equipmentType: null, //系列
          sensorNo: null,//设备编号
          floorId: null,//楼层
          positionDescription	: null, //位置
          handlePerson:null,//处理人
          //channelId:null //每个接口必传的参数，路由的值
        },
        count: '',
        form: {
          name: '',
          region: '',
          type: ''
        },
        formLabelAlign: {
          bName: null,
          equipmentType: null,
          sensorNo: null,
          floor: null,
          positionDescription: null,
          handlePerson: null
        },
        advancerules: {
        },
        params:{
          channelId:"",
        },
        buildId:"",
        newfloor:1,
        planSetup:"0"
      }
    },
    mounted() {
      this.fetchData();
      let mainWidth = document.querySelector('.record-top-wrap').offsetWidth;
      let leftWidth = document.querySelector('.record-items-left').offsetWidth;
      document.querySelector('.record-items-right').style.width = (mainWidth-leftWidth)+'px';
    },
    methods: {
      fetchData(){
        let vm = this;
        vm.params.channelId=vm.$route.params.id;
        vm.listQuery.dateStrs=null; 
        vm.restsAdvanc(); 
        vm.type({alrmCategory:"",handleFlag:""});
        vm.getList();
        vm.buildCount();
        vm.alrmType();
        vm.initChart();
        this.$store.dispatch("getImgAuth").then(()=>{
          this.planSetup=this.$store.getters.planSetup;
        })
      },
      handleCopy(text, event) {
        clip(text+'', event)
      },
      changeSwitch(val){
        changeRsolve(val.id).then((res)=>{
          if(res.status===200){
            this.$notify({
              title: "成功",
              message: "处理成功",
              type: "success",
              duration: 2000
            });
          }

        })
      },
      handleAlarm(row){
        this.rowdata=row;
        this.alarmtype=row.alrmCategory;
        this.isdelalram=true;
      },
      handleSure(){
        if (this.alarmtype==1) {//火警
          changeFireRsolve(this.$qs.stringify({id:this.rowdata.id,flag:this.switchalramtype})).then(res=>{
            if(res.status===200){
              this.$notify({
                title: "成功",
                message: "处理成功",
                type: "success",
                duration: 2000
              });
              this.isdelalram=false;
              this.getList();
            }
          }).catch(res=>{
            this.$notify({
              title: "提示",
              message: "网络异常！",
              type: "warning",
              duration: 2000
            });
            this.isdelalram=false;
          })
        }else{//故障
          changeRsolve(this.$qs.stringify({id:this.rowdata.id})).then((res)=>{
            if(res.status===200){
              this.$notify({
                title: "成功",
                message: "处理成功",
                type: "success",
                duration: 2000
              });
              this.isdelalram=false;
              this.getList();
            }
          }).catch((res)=>{
            this.$notify({
              title: "提示",
              message: "网络异常！",
              type: "warning",
              duration: 2000
            });
            this.isdelalram=false;
          })
        }
      },
      //报警类型
      type(type) {
        let alarmtype=type||{};
        selectAlrmType(Object.assign({},this.listQuery,this.params,alarmtype)).then((res)=> {
          this.alrmTypeList = res.data;
        })
      },
      //饼状图
      initChart() {
        selectCount(Object.assign({},this.listQuery,this.params)).then((res)=> {
          // console.log(res.data);
          this.countList = res.data;
          selectCountChart(this.params).then((res)=>{
          let charData = res.data;
          var chart = echarts.init(document.getElementById('record_chart'));
          var option = {
            grid:{
              left:'10%',
              right:65,
              bottom:20,
              top:20
            },
            tooltip : {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            legend:{
              icon:'line',
              orient: 'vertical',
              textStyle: {
                color: 'rgba(80, 227, 194, 0.7)'
              },
              itemHeight:3,
              left:'right',
              top:'top',
              data:['火警','误报','故障']
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: charData.months,
              axisLine:{
                show:false,
                lineStyle:{
                  color:"rgba(80, 227, 194, 0.3)"
                }
              }
            },
            yAxis: {
              type: 'value',
              axisLine:{
                show:false,
                lineStyle:{
                  color:"rgba(80, 227, 194, 0.3)"
                }
              },
              splitLine:{
                show:true,
                lineStyle:{
                  color:'rgba(80, 227, 194, 0.3)'
                }
              }
            },
            color:['#E4393C','#1ABC9C','#FFAF40'],
            series : [
            {
              type:'line',
              name:'火警',
              smooth:true,
              symbol: 'none',
              showAllSymbol: true,
              sampling: 'average',
              itemStyle: {
                normal: {
                  color: '#E4393C'
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#E4393C'
                  }, {
                    offset: 1,
                    color: 'rgba(0,0,0,0)'
                  }])
                }
              },
              data: charData.alarmCount
            },
              {
                type:'line',
                name:'误报',
                smooth:true,
                symbol: 'none',
                showAllSymbol: true,
                sampling: 'average',
                itemStyle: {
                  normal: {
                    color: '#1ABC9C'
                  }
                },
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#1ABC9C'
                    }, {
                      offset: 1,
                      color: 'rgba(0,0,0,0)'
                    }])
                  }
                },
                data: charData.notAlarmCount
              },
              {
                type:'line',
                smooth:true,
                symbol: 'none',
                name:'故障',
                showAllSymbol: true,
                sampling: 'average',
                itemStyle: {
                  normal: {
                    color: '#FFAF40'
                  }
                },
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#FFAF40'
                    }, {
                      offset: 1,
                      color: 'rgba(0,0,0,0)'
                    }])
                  }
                },
                data: charData.faultCount
              }
            ]
          };
          chart.setOption(option);
          });
        })
      },
      restpage(){
        //切换类时重置分页
        this.listQuery.limit=15;
        this.listQuery.page=1;
      },
      switchTable() {
        // 切换按钮时重置分页查询条件
        this.listQuery.typeName = undefined;
        this.listQuery.type = undefined;
        this.listQuery.alrmType = "";
        this.listQuery.dateStrs=null;
        if(this.radioType == 'now') {
          this.listQuery.tag =0;
          this.listQuery.limit=15;
          this.listQuery.page=1;
          this.tableKey = 0;
          this.getList();
          this.type({alrmCategory:"",handleFlag:""});
        }else if(this.radioType == 'Fire_alarm') {
          this.listQuery.tag = 1;
          this.listQuery.limit=15;
          this.listQuery.page=1;
          this.tableKey = 1;
          this.getList();
          this.type({alrmCategory:"1",handleFlag:"1"});
        }else {
          this.listQuery.tag = 2;
          this.listQuery.limit=15;
          this.listQuery.page=1;
          this.tableKey = 2;
          this.getList();
          this.type({alrmCategory:"0",handleFlag:"1"});
        }
      },
      //获取表格所有的内容
      getList() {
        this.listLoading = true;
        let dateStrs;
        this.list = [];
        this.listfire =[];
        this.listbreak = [];
        if(this.listQuery.dateStrs){
          dateStrs = (this.listQuery.dateStrs).toString();
        }
        pageList(Object.assign({},this.listQuery,this.params,{dateStrs:dateStrs})).then(response => {
          if (this.listQuery.tag==0) {
            this.total = response.data.total;
            this.listLoading = false;
          }else if(this.listQuery.tag==1){
            this.totalfire = response.data.total;
            this.listLoading = false;
          }else{
            this.totalbreak = response.data.total;
            this.listLoading = false;
          }
          this.list = response.data.rows;
        });
      },
      //高级查询条件-建筑物
      buildCount() {
        selectCountByBuild(Object.assign({},this.listQuery,this.params)).then(res=>{
          this.buildList = res.data.bname;
        })
      },
      //高级查询条件-系列
      alrmType() {
        getSelected(Object.assign({},this.listQuery,this.params)).then(res=>{
          this.series = res.data.equipmentType;
        })
      },
      //  重置查询条件
      restsAdvanc(){
        this.listQuery.bName = undefined;
        this.listQuery.equipmentType = undefined;
        this.listQuery.sensorNo = undefined;
        this.listQuery.floorId = undefined;
        this.listQuery.positionDescription = undefined;
        this.listQuery.confirPerson = undefined;
        this.listQuery.handlePerson = undefined;
      },
      //根据类型,时间查询
      handleFilter() {
        this.restsAdvanc();
        this.getList();
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      //高级查询里面的查询
      handleAdvaceSerach(formName){
        const set = this.$refs;
        this.listQuery.page = 1;
        set[formName].validate(valid => {
          if (valid) {
            if (this.formLabelAlign.bName!="") {
              this.listQuery.bName=this.formLabelAlign.bName;
            }else {
              this.listQuery.bName=undefined;
            }
            if (this.formLabelAlign.equipmentType!="") {
              this.listQuery.equipmentType=this.formLabelAlign.equipmentType;
            }else {
              this.listQuery.equipmentType=undefined;
            }
            if (this.formLabelAlign.sensorNo!="") {
              this.listQuery.sensorNo=this.formLabelAlign.sensorNo;
            }else{
              this.listQuery.sensorNo=undefined
            }
            if (this.formLabelAlign.floor!="") {
              this.listQuery.floorId=this.formLabelAlign.floor;
            }else{
              this.listQuery.floorId=undefined
            }
            if (this.formLabelAlign.positionDescription!="") {
              this.listQuery.positionDescription=this.formLabelAlign.positionDescription;
            }else{
              this.listQuery.positionDescription=undefined
            }if (this.formLabelAlign.handlePerson!="") {
              this.listQuery.handlePerson=this.formLabelAlign.handlePerson;
            }else{
              this.listQuery.handlePerson=undefined
            }
            this.isadvance=false;
            this.getList();
            set[formName].resetFields();
          }
        });

      },
      viewimg(row,floor){
        this.buildId=row.buildId+"";
        this.newfloor=floor;
        this.realtimePointShow=true;
      },
      //重置查询表单
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.formLabelAlign.bName="";
        this.formLabelAlign.equipmentType="";
        this.isadvance=false;
      },
    },
    watch:{
      '$route':'fetchData'
    }

  }
</script>

<style lang="scss" rel="stylesheet/scss">

  .calendar-list-container {
    .icon-nf-copy{
      cursor: pointer;
      position: relative;
      .icon-nf-copy-btn{
        position: absolute;
        opacity: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
    }
    .filter-container {
      display: flex;
      justify-content: space-between;
      .title {
        color: rgb(129, 128, 128);
      }
    }
    .fire{
      color:#E4393C;
    }
    .break{
      color:#FFAF40;
    }
    .el-switch {
      height: 22px;
    }
    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }
    .el-table th {
      background: #f5f7fa;
    }
    .search {
      float: right;
    }
    .img {
      cursor: pointer;
    }
    .search {
      //   position: absolute;
      //   right: 0;
      //   top: 30px;
      float: right;
    }

  }
</style>

